<template>
	<view>
		<view class="_table" :class="hasdel?'hasdel':'notdel'" :style="{'--col':'auto '.repeat(tableData.thead.length).trim(),'text-align':align}">
			
            <view class="_th" v-for="(item,i) in tableData.thead" :key="i"
            :style="{'width':item.width?item.width+'rpx':''}"
            >{{item.name}}</view>
			<view class="_td" :class="item.isFlex?'isFlex':''" 
            v-for="(item,i) in tableData.tbody" :key="i+'td'" 
            :style="{'grid-area': item.gridArea||'unset','display':item.gridArea=='auto'||item.value==''?'none':'','color':item.color,'backgroundColor':item.bgColor,'text-align':item.align}">
				<template v-if="item.isdel">
                    <view class="actionlist" v-if="hasdel">
                        <view class="red" @click="deltable(item.index,item.ind)">删除</view>
                    </view>
				    
				</template>
                <template v-else>
                    <template v-if="item.isimg && item.value">
                        <image :src="item.value" mode="widthFix"></image>
                    </template>
                  
                    <template v-else>
                        {{item.value}}
                    </template>
                </template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"grid-table",
		props:{
            proplist:Array,
			align:String,
            oid:Number,
            hasdel:{
                type:Boolean,
                default:true
            }
		},
		data() {
			return {
                tableData:{
                    thead:[
                        {
                            name:'操作',
                            width:80
                        },
                        {
                            name:'序号'
                        },{
                            name:'照片'
                        },{
                            name:'名称'
                        },{
                            name:'图纸编号',
                            width:120
                        },{
                            name:'生产位置',
                            width:120
                        },{
                            name:'具体部件',
                            width:120
                        },{
                            name:'数量'
                        },{
                            name:'单位'
                        },{
                            name:'规格',
                            width:120
                        },{
                            name:'描述',
                            width:150
                        },{
                            name:'备注',
                            width:250
                        }
                        
                    ],
                    tbody:[]
                },
                delbigs:[],
                delones:[],
			};
		},
        created() {
          // this.updatetable()  
        },
        methods:{
            updatetable(){
                console.log('草尼马为啥不更新   在',this.tableData)
                this.formatproplist()
            },
            deltable(index,ind){
                this.$emit('del',index,ind)
              
            },
            edit(id,type){
                if(this.hasdel){
                    this.$navto(`/pages/proplist/from?id=${id}&oid=${this.oid}&type=${type}`)
                }
            },
            formatproplist(){
             
                var i = 1;
                var row = 2
                var gridrow = 2
                var tableData = [];
                var i1=3;
                var i2=4;
                if(this.hasdel == false){
                    i1 = 2
                    i2 = 3
                }
                this.proplist.forEach((item,index)=>{
                    if(item.child.length>=1){
                        item.child.forEach((val,ind)=>{
                            var tbody = []
                            tbody[0] = {value:"删除",isdel:true,index:index,ind:ind}
                            tbody[1] = {value:i}
                            if(ind == 0){
                                gridrow = row
                            }
                            
                            if(ind + 1 >= item.child.length ){
                                if(item.child.length>1){
                                    var gridArea_1 = [gridrow,i1,row+1,i1]
                                     var gridArea_2 = [gridrow,i2,row+1,i2]
                                    tbody[2] = {value:item.thumb || ' ',gridArea:gridArea_1.join('/'),isimg:true}  
                                    tbody[3] = {value:item.title || ' ',gridArea:gridArea_2.join('/'),isedit:item.id,type:'parent'}
                                }else{
                                    tbody[2] = {value:item.thumb || ' ',isimg:true}
                                    tbody[3] = {value:item.title || ' ',isedit:item.id,type:'parent'}
                                }
                         
                            }else{
                                tbody[2] = {value:""}
                                tbody[3] = {value:""}
                            }
                            tbody[4] =  {value:val.drawing || ' ',isedit:val.id,type:'child'}
                            tbody[5] =  {value:val.position || ' '}
                            tbody[6] =  {value:val.title || ' '}
                            tbody[7] =  {value:val.num || 1}
                            tbody[8] =  {value:val.unit || ' '}
                            tbody[9] =  {value:val.spec || ' '}
                            tbody[10] =  {value:val.desc || ' '}
                            tbody[11] = {value:val.msg || ' '}
                            if(this.hasdel == false){
                                tbody.shift(0,1)
                            }
                            i ++
                            row ++
                            tableData = tableData.concat(tbody)
                        })
                    }else{
                        var tbody = []
                        tbody[0] = {value:"删除",isdel:true,index:index,ind:0}
                        tbody[1] = {value:i}
                        gridrow = row
                        
                        tbody[2] = {value:item.thumb,isimg:true}
                        tbody[3] = {value:item.title,isedit:item.id,type:'parent'}
                        tbody[4] =  {value:" "}
                        tbody[5] =  {value:" "}
                        tbody[6] =  {value:" "}
                        tbody[7] =  {value:" "}
                        tbody[8] =  {value:" "}
                        tbody[9] =  {value:" "}
                        tbody[10] =  {value:" "}
                        tbody[11] = {value:" "}
                        if(this.hasdel == false){
                            tbody.shift(0,1)
                        }
                        console.log(tbody)
                        i ++
                        row ++
                        tableData = tableData.concat(tbody)
                    }
                    
                  
                })
                if(this.hasdel == false){
                    this.tableData.thead.shift(0,1)
                }
                this.tableData.tbody = tableData
                var _this = this
             
                
                // 
            },
        }
	}
</script>

<style lang="scss" scoped>
	$tb-pd: 4px 8px;
	$tb-color: #c7c9ce;
	@mixin isFlex() {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	._table{
		width: 100%;
		box-sizing: border-box;
		border-left: 1px solid $tb-color;
		border-right: 1px solid $tb-color;
		border-top: 1px solid $tb-color;
		// border: 1px solid $tb-color;
		grid-template-columns:  var(--col);
		display: grid; 
		overflow: auto;
		white-space: break-spaces;
	}
	._th{
		text-align: center;
		padding: $tb-pd;
		font-size:26rpx;
		font-weight: bold;
		border-right: 1px solid $tb-color;
		border-bottom: 1px solid $tb-color;
        min-width: 80rpx;
		@include isFlex;
	
	}
	._td{
        min-width: 80rpx;
		padding: $tb-pd;
		font-size:24rpx;
		border-right: 1px solid $tb-color;
		border-bottom: 1px solid $tb-color;
        display: flex;
        align-items: center;
        justify-content: center;

	}
	.isFlex{
		@include isFlex;
	}
	// 固定表头样式
	.fixed-thead{
		display: grid;
		grid-template-columns:  var(--col);
	}
	.fiexd_td{
		visibility: collapse;
	}
    image{
        width: 30rpx;
        height: 30rpx;
    }
    .edit{
      text{
          color: #2979ff;
      }
    }
    .hasdel{
        ._th,._td{
            &:nth-child(12n){
            	border-right: none;
            }
        }
    }
    .notdel{
        ._th,._td{
            &:nth-child(11n){
            	border-right: none;
            }
        }
    }
    ._td{
        white-space: normal;
        word-break: break-all;
    }
</style>